<template>
  <div class="app-container">
    <el-button style="margin: 10px 20px 10px 20px;" type="primary" class="ark-button-black" @click="partake()">
      一键导入
    </el-button>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
    >
      <el-table-column label="卡池名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.pool }}
        </template>
      </el-table-column>
      <el-table-column label="卡池属性" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.state" placeholder="请选择" @change="stateChange(scope.row.pid,scope.row.state)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- {{ scope.row.state }} -->
        </template>
      </el-table-column>
      <el-table-column label="UP六星干员" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.up6" placeholder="请输入UP干员，用“|”间隔" />
        </template>
      </el-table-column>
      <el-table-column label="UP五星干员" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.up5" placeholder="请输入UP干员，用“|”间隔" />
        </template>
      </el-table-column>
      <el-table-column label="UP四星干员" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.up4" placeholder="请输入UP干员，用“|”间隔" />
        </template>
      </el-table-column>
      <el-table-column label="卡池开始时间" align="center">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.time"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" class="ark-button-black" @click="handleClick(scope.row)">更新</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :hide-on-single-page="hide" :page-size="listQuery.pageSize" layout="total,prev, pager, next" :total="total" :current-page="listQuery.pageNo" @current-change="handleCurrentChange" />

  </div>
</template>

<script>
import { poolList, editPool, updataPool } from '@/api/other'
export default {
  data() {
    return {
      list: null,
      listLoading: true,
      hide: true,
      total: 10,
      options: [{
        value: '标准寻访',
        label: '标准寻访'
      }, {
        value: '定向寻访',
        label: '定向寻访'
      }, {
        value: '限定寻访',
        label: '限定寻访'
      }],
      userInfo: false, // 用户个人信息弹出层
      form: {},
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        user: '',
        pool: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      poolList(this.listQuery).then(response => {
        this.total = Number(response.data.totalRecords)
        this.list = response.data.data
        this.listLoading = false
      })
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.fetchData()
    },
    stateChange(pid, state) {
      editPool({ 'pid': pid, 'state': state, 'type': 'state' }).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.fetchData()
    },
    partake() {
      updataPool().then(res => {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      })
    },
    handleClick(val) {
      const data = {
        'pid': val.pid,
        'up6': val.up6,
        'up5': val.up5,
        'up4': val.up4,
        'time': val.time,
        'type': 'up'
      }
      editPool(data).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

